import * as React from "react";
import { Route } from "mobx-state-router";

import "./style.scss";
import { Routes } from "Store/Routes";

interface SettingsPanelProps {
  route?: Routes;
  currentRoute: Route;
}

const SettingsPanel: React.SFC<SettingsPanelProps> = props => {
  // FIXME: maybe, there are have another way how
  // to show the general page in first render
  if (props.currentRoute.name === "__initial__") {
    props.route.route.goTo("general");
  }

  const goTo = (to: string) => {
    props.route.route.goTo(to);
  };

  return (
    <div className="panel">
      <div onClick={() => goTo("general")}>
        <div className={`item ${props.currentRoute.name === "general" ? "active" : ""}`}>
          <div className="icon">
            <svg width="22" height="22" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M14.5 7.5C14.5 11.366 11.366 14.5 7.5 14.5C3.63401 14.5 0.5 11.366 0.5 7.5C0.5 3.63401 3.63401 0.5 7.5 0.5C11.366 0.5 14.5 3.63401 14.5 7.5Z"
                fill="white"
                fillOpacity="0"
                stroke="#333333"
              />
              <path
                d="M8.08981 9.9773H6.81888L6.71994 1.66669H8.19635L8.08981 9.9773ZM6.66667 12.5063C6.66667 12.2677 6.73516 12.0689 6.87215 11.9098C7.01421 11.7455 7.22223 11.6633 7.4962 11.6633C7.77017 11.6633 7.97819 11.7455 8.12025 11.9098C8.26231 12.0689 8.33334 12.2677 8.33334 12.5063C8.33334 12.7449 8.26231 12.9437 8.12025 13.1027C7.97819 13.2565 7.77017 13.3334 7.4962 13.3334C7.22223 13.3334 7.01421 13.2565 6.87215 13.1027C6.73516 12.9437 6.66667 12.7449 6.66667 12.5063Z"
                fill="#333333"
              />
            </svg>
          </div>
          <p className="label">General</p>
        </div>
      </div>
      {/* <div onClick={() => goTo('shortcuts')}>
                <div className={`item ${props.currentRoute.name === 'shortcuts' ? 'active' : ''}`}>
                    <div className="icon">
                        <svg width="25" height="25" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fillRule="evenodd" clipRule="evenodd" d="M12.3684 1.31579H2.63158C1.90489 1.31579 1.31579 1.90489 1.31579 2.63158V12.3684C1.31579 13.0951 1.90489 13.6842 2.63158 13.6842H12.3684C13.0951 13.6842 13.6842 13.0951 13.6842 12.3684V2.63158C13.6842 1.90489 13.0951 1.31579 12.3684 1.31579ZM2.63158 0C1.1782 0 0 1.1782 0 2.63158V12.3684C0 13.8218 1.1782 15 2.63158 15H12.3684C13.8218 15 15 13.8218 15 12.3684V2.63158C15 1.1782 13.8218 0 12.3684 0H2.63158Z" fill="#333333"/>
                            <path d="M2.5 3.71951C2.5 3.04599 3.04599 2.5 3.71951 2.5H11.2805C11.954 2.5 12.5 3.04599 12.5 3.71951V11.2805C12.5 11.954 11.954 12.5 11.2805 12.5H3.71951C3.04599 12.5 2.5 11.954 2.5 11.2805V3.71951Z" fill="#333333"/>
                            <path d="M6.71115 8.08481C6.68686 8.42043 6.56253 8.68464 6.33816 8.87744C6.11522 9.07025 5.82083 9.16665 5.45499 9.16665C5.05485 9.16665 4.73973 9.0324 4.50965 8.7639C4.281 8.49398 4.16667 8.12409 4.16667 7.65422V7.46356C4.16667 7.16365 4.21955 6.89944 4.3253 6.67093C4.43105 6.44242 4.58182 6.26747 4.7776 6.14608C4.97482 6.02326 5.20347 5.96185 5.46356 5.96185C5.82369 5.96185 6.1138 6.05825 6.33387 6.25105C6.55395 6.44385 6.68114 6.71449 6.71544 7.06296H6.07235C6.05663 6.86159 6.00018 6.71592 5.90301 6.62594C5.80726 6.53454 5.66078 6.48884 5.46356 6.48884C5.2492 6.48884 5.08843 6.56596 4.98125 6.7202C4.8755 6.87302 4.82119 7.11081 4.81833 7.43357V7.66922C4.81833 8.00626 4.86907 8.25262 4.97053 8.40829C5.07342 8.56396 5.23491 8.6418 5.45499 8.6418C5.65363 8.6418 5.80154 8.59681 5.89872 8.50683C5.99733 8.41543 6.05377 8.27476 6.06807 8.08481H6.71115Z" fill={props.currentRoute.name === 'shortcuts' ? '#30C2FF' : '#FFFFFF'}/>
                            <path d="M7.83441 6.23606V6.80589H8.23098V7.26005H7.83441V8.41686C7.83441 8.50255 7.85084 8.56396 7.88371 8.60109C7.91658 8.63823 7.97946 8.65679 8.07235 8.65679C8.14095 8.65679 8.20168 8.65179 8.25456 8.6418V9.11095C8.13309 9.14808 8.00804 9.16665 7.87943 9.16665C7.44499 9.16665 7.22348 8.94742 7.2149 8.50898V7.26005H6.87621V6.80589H7.2149V6.23606H7.83441Z" fill={props.currentRoute.name === 'shortcuts' ? '#30C2FF' : '#FFFFFF'}/>
                            <path d="M9.87943 7.38644C9.79511 7.37502 9.7208 7.3693 9.65649 7.3693C9.42212 7.3693 9.26849 7.44857 9.19561 7.60709V9.1238H8.5761V6.80589H9.16131L9.17846 7.08224C9.30279 6.86945 9.475 6.76305 9.69507 6.76305C9.76367 6.76305 9.82798 6.77233 9.888 6.7909L9.87943 7.38644Z" fill={props.currentRoute.name === 'shortcuts' ? '#30C2FF' : '#FFFFFF'}/>
                            <path d="M10.8333 9.1238H10.2117V5.83331H10.8333V9.1238Z" fill={props.currentRoute.name === 'shortcuts' ? '#30C2FF' : '#FFFFFF'}/>
                        </svg>
                    </div>
                    <p className="label">Shortcuts</p>
                </div>
            </div> */}
    </div>
  );
};

export default SettingsPanel;
